<template>
  <div>
      <city-header></city-header>
      <city-search :cities="cities"></city-search>
      <city-list :cities="cities" :hot-cities="hotCities" :letter="letter"></city-list>
      <city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
  </div>
</template>

<script>
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'
import { getCityInfo } from '@/api/city'
export default {
    name:'City',
    components:{
        CityHeader,
        CitySearch,
        CityList,
        CityAlphabet
    },
    data () {
    return {
      cities:{},
      hotCities:[],
      letter:'',
    }
  },
  created(){
    this.getInfo()
  },
  methods:{
    getInfo(){
      getCityInfo().then(response=>{
        if(response.data.ret){
          this.cities = response.data.data.cities
          this.hotCities = response.data.data.hotCities
        }
      })
    },
    handleLetterChange(letter){
        this.letter = letter
    }
  }
}
</script>
